<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <div id="app">
        <button @click="list.push('火影忍者')">添加元素</button>
        <button @click="list.pop()">删除元素</button>
        <ul>
            <!-- 遍历list数组，数组有多少个元素就产生多少个li -->
            <!-- item就是数组中的每一项（每个元素） -->
            <!-- <li v-for="item in list">{{ item }}</li> -->
            <li v-for="(item, index) in list">{{ item }} --- {{ index }}</li>

            <!-- 每一项一定要叫item，下标一定要叫index吗？ -->
            <!-- v就是每一项，i就是下标 -->
            <!-- <li v-for="(v, i) in list">{{ v }} --- {{ i }}</li> -->

            <!-- 通过下面的代码发现，跟名字真的没有半毛钱关系，只跟位置有关 -->
            <!-- 先写的那个一定是每一项，后写的一定是下标 -->
            <!-- 下面虽然可以这么写，但是不建议，因为起名要有意义，不要乱起名 -->
            <!-- <li v-for="(index, item) in list">{{ index }} --- {{ item }}</li> -->
        </ul>

        <div>
            <!-- 也可以遍历对象，第一个一定是属性值 -->
            <!-- 第二个一定是属性名 -->
            <p v-for="(value,key) in obj">
                {{ value }} -- {{ key }}
            </p>
        </div>

        <!-- 指定次数的循环 -->
        <!-- item是从1开始到这个数字 -->
        <h3 v-for="item in 9">
            {{ item }}
        </h3>

    </div>

    <script src="./vue.js"></script>
    <script>
        // 构造函数这里的都是大写
        new Vue({
            el: '#app',
            data: {
                list: ['千与千寻', '你的名字。', '龙猫', '天气之子'],
                obj: {
                    name: 'jack',
                    age: 16,
                    gender: '男'
                }
            },
            methods: {

            }
        })
    </script>
</body>
</html>